<template>
    <section>
        <el-col :span="24">
            <el-table :header-cell-style="{ background: '#F3F4F7', color: '#555' }" :data="bomXHData" :max-height="height" border stripe size="mini"
                      show-summary
                      :summary-method="getSummaries">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column width="100" prop="f51" label="线色"></el-table-column>
                <el-table-column width="100" prop="part" label="部位"></el-table-column>
                <el-table-column width="100" prop="f52" label="针数"></el-table-column>
                <el-table-column width="100" prop="f53" label="换色批次"></el-table-column>
                <el-table-column width="100" prop="f54" label="针数单价">
                    <template slot-scope="{row}">
                        {{parseFloat(row.f54)}}
                    </template>
                </el-table-column>
                <el-table-column width="100" label="针数计费">
                    <template slot-scope="{row}">
                        {{parseFloat((Number(row.f52) * Number(row.f54)).toFixed(2))}}
                    </template>
                </el-table-column>
                <el-table-column width="100" prop="f55" label="其他费用"></el-table-column>
                <el-table-column width="100" label="实际绣花价">
                    <template slot-scope="{row}">
                        {{parseFloat((Number(row.f52) * Number(row.f54) + Number(row.f55)).toFixed(2))}}
                    </template>
                </el-table-column>
                <el-table-column width="300" prop="comment" label="备注" show-overflow-tooltip></el-table-column>
                <el-table-column label=""></el-table-column>
            </el-table>
        </el-col>
    </section>
</template>

<script>

export default {
    name: "designBomXh",
    props: {
        bomXHData:{
            type: Array,
            default: []
        },
        height: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            user: {},
            nodeActions: [],
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{

    },
    methods: {
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                if(column.label == '实际绣花价'){
                    sums[index] = 0;
                    data.forEach(item => {
                        let price = parseFloat((Number(item.f52) * Number(item.f54) + Number(item.f55)).toFixed(2));
                        sums[index] += price;
                    })
                    sums[index] = parseFloat(sums[index].toFixed(2));
                }else if(column.label == '针数'){
                    sums[index] = 0;
                    data.forEach(item => {
                        sums[index] += item.f52;
                    })
                } else {
                    sums[index] = "";
                }
            });

            return sums;
        },
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>
